*{
margin: 0;
padding: 0;
}

body
{
background-color: gray;
font: 14px Arial;
	
	.container{
	background: #ddd;
	margin: 20px auto;
	padding: 20px;
	position: relative;
	width: 780px;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

	box-shadow: 1px 1px 5px #111;
	-moz-box-shadow: 1px 1px 5px #111;
	-webkit-box-shadow: 1px 1px 5px #111;

		.gallery{
		width: 800px;
		margin: 0 auto;
			
			a{
			display: inline-block;
			height: 150px;
			position: relative;
			width: 256px;

			&:focus:nth-child(3n+1) img{
			left: 150px;
			}

			&:focus:nth-child(3n+2) img{
			left: -50px;
			}

			&:focus:nth-child(3n+3) img{
			left: -250px;
			}


			&:focus:nth-child(n+7) img{
			left: -150px;
			}

			&:focus:nth-child(n+10) img{
			left: -295px;
			}

			&:focus img{
			border: 15px solid white;
			cursor: default;
			height: 300%;			
			position: absolute;			
			width: 300%;
			z-index: 25;

			box-shadow: 1px 1px 5px #888;
			-moz-box-shadow:1px 1px 5px #888;
			-webkit-box-shadow:1px 1px 5px #888;
			-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
			-webkit-transition-duration:0.5s;
			-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
			-moz-transition-duration:0.5s;
			-o-transition-property:width, height, top, bottom, left, right, z-index, border;
			-o-transition-duration:0.5s;
			transition-property:width, height, top, bottom, left, right, z-index, border;
			transition-duration:0.5s;
			}

			&:focus ~ .close{
			display: block;
			}

				img{
				border: 5px solid white;
				cursor: pointer;
				display: block;
				height: 100%;
				width: 100%;
				top: -5px;
				left: 0;
				position: absolute;
				z-index: 1;

				-moz-user-select: none;
				-khtml-user-select: none;
				user-select: none;

				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
				-webkit-transition-duration:0.5s;
				-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
				-moz-transition-duration:0.5s;
				-o-transition-property:width, height, top, bottom, left, right, z-index, border;
				-o-transition-duration:0.5s;
				transition-property:width, height, top, bottom, left, right, z-index, border;
				transition-duration:0.5s;
				}
			}

			.close{
				background: transparent;
				cursor: pointer;
				display: none;
				height: 500px;
				left: 100px;
				position: absolute;
				top: 120px;
				width: 850px;
				z-index: 30;
			}
		}
	}
}



